<template>
  <div class="all">
      <div class="add-nav">
        <el-radio-group v-model="select" >
        <el-radio-button :label="true">服务器列表</el-radio-button>
        <el-radio-button :label="false">添加服务器</el-radio-button>
        </el-radio-group>
      </div>
      <!-- 服务器列表 -->
      <div class="add-list" v-if="select">
        <el-table :data="list">
          <el-table-column align="center" prop="name" label="服务器名称"></el-table-column>
          <el-table-column align="center" prop="ip" label="IP或域名"></el-table-column>
          <el-table-column align="center" label="服务器类别">
            <template slot-scope='scope'>
              <i v-if="scope.row.isDefault==1">默认</i>
              <i v-else>非默认</i>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope='scope'>
              <i v-if="scope.row.status==1">正常</i>
              <i v-else>故障</i>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="addTime" label="添加时间"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="mod=JSON.parse(JSON.stringify(scope.row)),mod.nickname=scope.row.name,show=true">修改</el-button>
              <el-button type="danger" size="small" @click="DelServer(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 添加服务器-->
      <div class="addServer" v-else>
      <el-form :model="add" label-width="100px">
      <el-form-item label="服务器名称:">
        <el-input v-model="add.name"></el-input>
      </el-form-item>
      <el-form-item label="域名或IP">
        <el-input v-model="add.ip"></el-input>
      </el-form-item>
      <el-form-item label="是否默认">
          <el-radio v-model="add.isDefault" :label="1">默认</el-radio>
          <el-radio v-model="add.isDefault" :label="0">非默认</el-radio>
      </el-form-item>

      <el-button type="primary" @click="AddServer">确定</el-button>
      <el-button @click="select=true">取消</el-button>
    </el-form>

      </div>
      <!-- 修改服务器 -->
	  <el-dialog width="20%" :title="'修改-'+mod.nickname" :visible.sync="show">
<el-form :model="mod" label-width="100px">
      <el-form-item label="服务器名称:">
        <el-input v-model="mod.name"></el-input>
      </el-form-item>
      <el-form-item label="域名或IP">
        <el-input v-model="mod.ip"></el-input>
      </el-form-item>
      <el-form-item label="是否默认">
          <el-radio v-model="mod.isDefault" :label="1">默认</el-radio>
          <el-radio v-model="mod.isDefault" :label="0">非默认</el-radio>
      </el-form-item>
      <el-form-item label="状态">
          <el-radio v-model="mod.status" :label="1">正常</el-radio>
          <el-radio v-model="mod.status" :label="0">故障</el-radio>
      </el-form-item>
      <el-button type="primary" @click="ModServer">确定</el-button>
      <el-button @click="mod=null">取消</el-button>
    </el-form>
	  </el-dialog>
    </div>
</template>

<script>
  import Cookies from 'js-cookie'
  import {ServerList,ServerMod,ServerDel,ServerAdd} from '@/utils/API'
  export default{
      inject:["reload"],
    data () {
      return{
        list:[],
        select:true,
        add:{adminName:Cookies.get('adminName'),
              token:Cookies.get('token')},
        mod:[],
        show:false
      }
      },
        methods:{
          //获取列表
          PostList(){
            const data={
              adminName:Cookies.get('adminName'),
              token:Cookies.get('token')
            }
            ServerList(data).then(res=>{
              this.list=res.data
            })
          },
          //修改信息
          ModServer(){
            const data={
              adminName:Cookies.get('adminName'),
              token:Cookies.get('token'),
              id:this.mod.id,
              name:this.mod.name,
              ip:this.mod.ip,
              isDefault:this.mod.isDefault,
              status:this.mod.status
            }
            ServerMod(data).then(res=>{
            if(res.code==0){
              this.$message.success('修改成功')
              this.reload()
            }else{
             this.$message.error(res.desc)
            }
            })
          },
          //删除
          DelServer(e){
            this.$confirm('删除'+e.name+'','系统提示',{
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
            }).then(()=>{
              const data={
                adminName:Cookies.get('adminName'),
                token:Cookies.get('token'),
                id:e.id
              }
              ServerDel(data).then(res=>{
                if(res.code==0){
                  this.$message.success('操作成功')
                  this.reload()
                }
              })
            }).catch(()=>{})
          },
          //添加服务器
          AddServer(){
            ServerAdd(this.add).then(res=>{
              if(res.code==0){
                this.$message.success('添加成功')
                this.select=true
                 this.PostList()
              }else{
                this.$message.error(res.desc)
              }
            })
          }
          },
          mounted() {
            this.PostList()
          }
      }
</script>
<style lang="scss" scoped>
.el-dialog{
      .el-button{
        margin: auto;
        text-align: center;
      }
      .el-form{padding: 5px 0 0 0;
      text-align: center;
      /deep/ .el-form-item__label{font-size: 16px;}
      .el-input{width: 100%;}
      }
      }
      .addServer{
        .el-form{
          width: 20%;
          margin:5% auto;
          padding: 5px 0 0 0;
          text-align: center;
        /deep/ .el-form-item__label{font-size: 16px;}
        .el-input{width: 100%;float: left;}
        }
      }
</style>
